<template>
  <view class="flex-col page">
	 
    <view class="flex-col group_1">
	<scroll-view scroll-y="true" v-if="list.length>0" :style="{height:scrollHeight+'px'}" @scrolltolower="loadmore">
      <view class="flex-col list">
        <view class="flex-col list-item" :key="i" v-for="(item, i) in list"   @click="go('/pages/notice/notice?id='+item.id)">
          <text class="text_1">{{item.title}}</text>
          <text class="text_3">{{item.summary}}</text>
          <image
            :src="item.coverImg"
            class="image_1"
          />
          <view class="justify-between group_2">
            <text class="text_5">{{item.createDate}}</text>
            <text class="text_7" @click.stop="del(item.id,i)">删除</text>
          </view>
        </view>
      </view>
	   </scroll-view>
	   <view class="" v-else>
	   	<u-empty style="height: 100vh;" width="250" mode="data" textSize="30rpx"
	   		icon="http://cdn.uviewui.com/uview/empty/order.png">
	   	</u-empty>
	   </view>
      <view class="flex-col items-end section_6">
        <view class="flex-col items-center text-wrapper" @click="empty"><text class="text_28">清空消息</text></view>
      </view>
    </view>

  </view>
</template>

<script>
  export default {
    components: {},
    data() {
      return {
		  more:false,
		  	status: 'loadmore',
		  scrollHeight:0,
        list: [],
		page:{
					  pageNum:1,
					  pageSize:10
		}
      };
    },
	created() {
		this.getGonggao();
	},
	mounted() {
	   	this.getScrollHeight();
	},
    methods: {
		loadmore()
		{
			// this.status = "loading";
			this.more = true;
			this.page.pageNum++;
			this.getGonggao(1)
		},
		getScrollHeight()
		{
			const query = uni.createSelectorQuery().in(this);
			query.select('.page').boundingClientRect();
			query.select('.section_6').boundingClientRect();
			query.exec(r=>{
				
					//进入页面滚动到底部
				 this.scrollHeight=r[0].height-r[1].height;
			
			});
			console.log(this.scrollHeight);
		},
	getGonggao(type=0)
	{
		this.$http('message.article',this.page).then(r=>{
			 if(r.code==200)
			 {
			   if(type==0)
			   {
				 this.list=r.data	  
			   }else{
				   if (r.data.length > 0) {
				   	this.list = this.list.concat(r.data);
				   	this.status = "loadmore";
				   } else {
				   	this.status = "nomore";
				   
				   }
			   }
				 		
			
			 }
		});
	},
		empty()
		{
		  
		  			uni.showModal({
		  					title: '提示',
		  					// 提示文字
		  					content: '确认清空信息吗？',
		  					// 取消按钮的文字自定义
		  					cancelText: "取消",
		  					// 确认按钮的文字自定义
		  					confirmText: "删除",
		  					//删除字体的颜色
		  					confirmColor:'red',
		  					//取消字体的颜色
		  					cancelColor:'#000000',
		  					success: res=> {
		  					if (res.confirm) {
		  						this.$http('message.deleteConsumerAllNotice').then(r=>{
		  						   if(r.code==200)
		  						   {
		  							   this.list=[];
		  						   }
		  						});
		  					}else {
		  						// 执行取消后的操作
		  					}
		  				}
		  			
		  		
		  })
		},
		del(id,i)
		{
			
			uni.showModal({
					title: '提示',
					// 提示文字
					content: '确认删除该条信息吗？',
					// 取消按钮的文字自定义
					cancelText: "取消",
					// 确认按钮的文字自定义
					confirmText: "删除",
					//删除字体的颜色
					confirmColor:'red',
					//取消字体的颜色
					cancelColor:'#000000',
					success: res=> {
					if (res.confirm) {
						this.$http('message.articleIdDelete',{
							noticeId:id
						}).then(r=>{
						   if(r.code==200)
						   {
							   this.list.splice(i,1);
						   }
						});
					}else {
						// 执行取消后的操作
					}
				}
			
		
		 })
			
		},
	},
  };
</script>

<style scoped lang="scss">
  .list-item {
    padding: 29rpx 23rpx 34rpx 24rpx;
    background-color: #ffffff;
    border-radius: 16rpx;
  }
  .text_1 {
    margin-left: 8rpx;
    align-self: flex-start;
    color: #333333;
    font-size: 32rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 38rpx;
  }
  .text_3 {
    margin-left: 8rpx;
    margin-top: 24rpx;
    align-self: flex-start;
    color: #666666;
    font-size: 28rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 33rpx;
  }
  .image_1 {
    margin-top: 33rpx;
    border-radius: 16rpx;
    width: 654rpx;
    height: 328rpx;
  }
  .group_2 {
    margin-top: 21rpx;
  }
  .text_5 {
    margin-top: 6rpx;
    color: #999999;
    font-size: 24rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 28rpx;
  }
  .text_7 {
    margin-bottom: 6rpx;
    color: #ff371d;
    font-size: 24rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 28rpx;
  }
  .page {
    background-color: #f6f7f9ff;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100vh;
  }
  .group_1 {
    flex: 1 1 auto;
    overflow-y: auto;
	padding-bottom: 120rpx;
  }
  .list {
    padding: 15rpx 24rpx 32rpx;
  }
  .section_6 {
	  position: fixed;
	  bottom: 0;
	  left: 0;
	  right: 0;
    padding: 20rpx 0;
    background-color: #ffffff;
    box-shadow: 0px -2rpx 4rpx 0px #00000014;
  }
  .list-item:not(:first-of-type) {
    margin-top: 20rpx;
  }
  .text-wrapper {
    margin-right: 32rpx;
    padding: 9rpx 0 19rpx;
    background-color: #1d6aff14;
    border-radius: 28rpx;
    width: 148rpx;
  }
  .text_28 {
    color: #1d6aff;
    font-size: 24rpx;
    font-family: '.AppleSystemUIFont';
    line-height: 28rpx;
  }
</style>